<!DOCTYPE html>
<html>
<head>
    <title>地址列表</title>
    <link rel="stylesheet" href="__STATIC__/js/element-plus-214/element_plus.css">
    <script src="__STATIC__/js/element-plus-214/vue@next.js"></script>
    <script src="__STATIC__/js/element-plus-214/element_plus.js"></script>
    <script src="__STATIC__/js/element-plus-214/zh-cn.js"></script>
    <script src="__STATIC__/js/js/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/js/layui-v2.5.5/layui.all.js"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
    </style>
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab" id="app" v-cloak>
    <!-- 表格内容开始 -->
    <div>
        <el-button type="primary" @click="handleAdd">添加地区</el-button>
    </div>
    <div class="layui-card" style="margin-top:20px">
        <el-table :data="tableData" style="width: 100%;" :header-cell-style="{background:'#f6f6f8'}"
                  row-key="cri_id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  v-loading="loading" :expand-row-keys="expands">
            <el-table-column prop="cri_code" label="代码"></el-table-column>
            <el-table-column prop="cri_name" label="名称"></el-table-column>
            <el-table-column prop="cri_lng" label="经度"></el-table-column>
            <el-table-column prop="cri_lat" label="纬度"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row.cri_id)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(scope.row.cri_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
<script type="text/javascript">
    let layer = layui.layer
    const App = {
        data() {
            return {
                loading: true,
                tableData: [],
                expands:['1']
            };
        },
        created: function () {
            this.getAddressList()
        },
        methods: {
            getAddressList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Address://admin_index/getAddressList')}",
                    data: {},
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.tableData = res.data
                        }
                        that.loading = false
                    }
                });
            },
            //添加
            handleAdd() {
                let that = this;
                let url = "{:cmf_plugin_url('Address://admin_index/add_page')}";
                layer.open({
                    type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    , title: '新增地区'//层的标题
                    , shadeClose: false//是否点击遮罩关闭
                    , shade: 0.8//遮罩
                    , area: ['30%', '40%']//宽高
                    , fixed: false//固定
                    , content: url //iframe的url
                    , end: function () {
                        that.getAddressList()
                    }
                });
            },
            //编辑
            handleEdit(cri_id) {
                let that = this;
                let url = "{:cmf_plugin_url('Address://admin_index/edit_page')}?cri_id=" + cri_id;
                layer.open({
                    type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    , title: '编辑地区'//层的标题
                    , shadeClose: false//是否点击遮罩关闭
                    , shade: 0.8//遮罩
                    , area: ['30%', '40%']//宽高
                    , fixed: false//固定
                    , content: url //iframe的url
                    , end: function () {
                        that.getAddressList()
                    }
                });
            },
            //删除
            handleDelete(cri_id) {
                this.$confirm('是否确认删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.deletedPost(cri_id)
                }).catch(() => {

                })
            },
            deletedPost(cri_id) {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Address://admin_index/del')}",
                    data: {
                        cri_id: cri_id
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.$message({
                                type: 'success',
                                message: res.message,
                            })
                            that.getAddressList()
                        } else {
                            that.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    }
                });
            },
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });
    app.mount("#app");
</script>
</body>
</html>